<template>
    <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="name" label="属性名称" />
        <el-table-column prop="cname" label="商品类型">
            <template #default>
                {{ route.query.cname }}
            </template>
        </el-table-column>
        <el-table-column prop="selectType" label="属性是否可选" />
        <el-table-column prop="inputType" label="属性值的录入方式" />
        <el-table-column prop="inputList" label="可选值列表" />
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操做" width="200">
            <template #default="{ row }">
                <el-button text bg @click="editFn(row.id)">编辑</el-button>
                <el-button type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]" :total="total" />
</template>
<script setup lang='ts'>
import { productAttributeApi, PiLiangDelete } from "@/http/ums/api";
import useTable from '@/hooks/useTable'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import router from "@/router";
// @ts-ignore
import { ElMessageBox, ElMessage } from "element-plus";

const queryParams = reactive({
    cid: 0,
    pageNum: 1,
    pageSize: 5,
    type: 0
})

const route = useRoute()
const currentId = ref<any>(0)

currentId.value = route.query.cid
queryParams.cid = currentId.value

const { list, pageNum, pageSize, total, fetch } = useTable(productAttributeApi, queryParams)

const editFn = (id: any) => {
    // console.log(id);

    queryParams.cid = id
    // console.log(queryParams.cid);

    router.push({
        path: '/pms/updateProductAttr',
        query: {
            id: queryParams.cid
        }
    })
}

// 删除
const delFn = (id: number) => {
    console.log(id);
    const ids = ref(0)
    ids.value = id
    ElMessageBox.confirm('是否要删除该属性?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        PiLiangDelete(ids.value).then((res) => {
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                fetch();
            }
        });
    });
}

</script>
<style lang="less" scoped></style>